<script setup>
import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
import { onLoad } from '@dcloudio/uni-app'
import dayjs from 'dayjs'
import { ref } from 'vue'

import { getListByTypeApi } from '@/api/attendance'
import moren from '@/static/icon/tongxunlu/moren.png'
import config from '@/config'

const viewTitle = ref(null)
const time = ref(null)
const baseUrl = config.baseUrl
let cardData = ref([])

const rightIcon = () => {
  uni.switchTab({
    url: '/pages/index',
  })
}

const goPersonalStatistic = (item) => {
  uni.navigateTo({
    url:
      '/pages/attendance/statisticPage/personalStatistic?data=' +
      encodeURIComponent(JSON.stringify(item)) +
      '&groupId=' +
      time.value.groupId +
      '&time=' +
      encodeURIComponent(JSON.stringify(time.value)),
  })
}
const getListByTypeApiFn = async (params) => {
  let { data, code } = await getListByTypeApi(params)
  if (code === 200) {
    cardData.value = data
  }
}
onLoad((v) => {
  viewTitle.value = v.title
  time.value = JSON.parse(decodeURIComponent(v.time))
  let params = {
    type: v.title,
    groupId: time.value.groupId,
    statisticsDateLte: dayjs(time.value.startDate).format('YYYY-MM-DD 00:00:00'),
    statisticsDateGte: dayjs(time.value.endDate).format('YYYY-MM-DD 23:59:59'),
  }
  getListByTypeApiFn(params)
})
</script>

<template>
  <view class="detail-box">
    <HeaderNavTabarVue
      :title="viewTitle"
      iconFont="icon-cuowuguanbiquxiao"
      @rightIcon="rightIcon"
    />
    <view v-if="time" class="time-box">
      <text>{{ dayjs(time.startDate).format('YYYY.MM.DD') }}</text>
      <text>-</text>
      <text>{{ dayjs(time.endDate).format('YYYY.MM.DD') }}</text>
      <text>&nbsp {{ viewTitle }} {{ cardData.length }} 人</text>
    </view>

    <view
      v-for="(item, index) in cardData"
      :key="index"
      class="msg-list"
      @tap="goPersonalStatistic(item)"
    >
      <view class="list-left">
        <image :src="baseUrl + item.avatar" v-if="item.avatar"></image>
        <image :src="moren" v-else></image>
        <view class="list-right">
          <view class="msg-type-author">
            <h4>{{ item.nickName }}</h4>
          </view>
          <text>{{ item.deptName }}</text>
        </view>
      </view>
      <p class="time-txt">
        {{ item.count }}
        <text v-if="viewTitle === '外勤' || viewTitle === '迟到' || viewTitle === '缺卡'">次</text>
        <text v-else-if="viewTitle === '请假'">小时</text>
        <text v-else>天</text>
        <i class="iconfont icon-youjiantou"></i></p>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import '@/static/style/index.scss';

.detail-box {
  .time-box {
    margin: 32rpx 24rpx;
    color: #86909c;
    font-size: 24rpx;
    font-style: normal;
    font-weight: 400;
  }

  .msg-list {
    @include flex($align: center, $justify: space-between);
    background-color: #fff;
    height: 108rpx;
    padding: 0 $spacing-row-base;

    &:active {
      background-color: #eff0f2;
    }

    .list-left {
      @include flex($align: center);

      image {
        width: 92rpx;
        height: 92rpx;
        margin-right: 16rpx;
      }

      .msg-type-author {
        @include flex($align: center);

        h4 {
          margin-right: 16rpx;
          color: #000000;
          font-family: 'PingFang SC';
          font-size: 32rpx;
          font-style: normal;
          font-weight: 400;
          line-height: 44.8rpx;
        }

        p {
          text-align: center;
          font-family: 'PingFang SC';
          font-size: 20rpx;
          font-style: normal;
          font-weight: 500;
          padding: 3rpx 8rpx;
          border-radius: 4rpx;
        }
      }

      text {
        align-self: stretch;
        color: #86909c;
        font-family: 'PingFang SC';
        font-size: 24rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 33.6rpx;
        margin-top: 8rpx;
      }
    }

    .time-txt {
      color: #86909c;
      text-align: right;
      font-family: 'PingFang SC';
      font-size: 28rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 39.2rpx;
    }
  }
}
</style>